<template>
  <div class="container">
    <div style="margin: 15px 0;" v-for="(item, index) in books" :key="index">
      <div>{{item.nr_title}}</div>
      <div v-for="itemContent in item.nr1s" style="text-align: left;line-height: 30px;">{{itemContent}}</div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import config from '../config/config'
  export default {
    name: 'hello',
    data () {
      return {
        content: '',
        books: []
      }
    },
    watch: {
      'content': function (val, oldVal) {
        this.search(val)
      }
    },
    created () {
      axios.get(config.URL + '/api').then(res => {
        console.log(res)
        this.books = res.data
      })
    },
    methods: {
      search: function (val) {
        console.log(val)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
